<script setup>
import { login } from "@/api/login";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import "@material/web/icon/icon.js";
import "@material/web/iconbutton/icon-button.js";
import "@material/web/button/filled-button.js";
import "@material/web/button/outlined-button.js";
import "@material/web/button/text-button.js";
import "@material/web/textfield/filled-text-field.js";
import "@material/web/progress/circular-progress.js";
import "@material/web/dialog/dialog.js";
import MaterialDialog from "@/components/MaterialDialog.vue";
import LoadingLayer from "@/components/LoadingLayer.vue";

const router = useRouter();

const formData = reactive({
  username: "",
  password: "",
});

const message = ref(null);
const failed = ref(false);
const loading = ref(false);

async function onSubmit() {
  try {
    loading.value = true;
    await login(formData.username, formData.password);
    router.replace({
      name: "default"
    });
  } catch (ex) {
    message.value = ex.toString();
    failed.value = true;
  } finally {
    loading.value = false;
  }
}

function onReset() {
  formData.username = "";
  formData.password = "";
}
</script>

<template>
  <Teleport to="#wrapper">
    <div class="login teleport-view" role="presentation">
      <LoadingLayer :loading="loading" delay></LoadingLayer>

      <MaterialDialog :open="failed" @close="failed = false">
        <template #headline>
          登录失败
        </template>
        <template #content>
          <form id="failed-dialog" method="dialog">
            {{ message }}
          </form>
        </template>
        <template #actions>
          <md-text-button autofocus type="submit" form="failed-dialog">确定</md-text-button>
        </template>
      </MaterialDialog>

      <form ref="form" @submit.prevent="onSubmit()" @reset="onReset" id="login-form">
        <h1 class="headline-small">登录</h1>
        <p>
          <md-filled-text-field label="用户名" required @keypress.enter.prevent="() => { $refs.form.requestSubmit() }"
            autocomplete="username" v-model="formData.username">
          </md-filled-text-field>
        </p>
        <p>
          <md-filled-text-field type="password" label="密码" required
            @keypress.enter.prevent="() => { $refs.form.requestSubmit() }" autocomplete="current-password"
            v-model="formData.password">
          </md-filled-text-field>
        </p>
        <p id="actions">
          <md-filled-button type="submit">提交</md-filled-button>
          <md-outlined-button type="reset">重置</md-outlined-button>
        </p>
      </form>
    </div>
  </Teleport>
</template>

<style scoped>
.login {
  display: grid;
  grid-template-areas: ". . ."
    ". form ."
    ". . .";
  grid-template-columns: 1fr min(24rem, calc(100% - 4rem)) 1fr;
  grid-template-rows: 1fr auto 1fr;
}

#login-form {
  grid-area: form;
  padding: 2rem;
}

#login-form>p {
  margin: 1em 0;
}

#login-form md-filled-text-field {
  width: 100%;
}

#actions {
  text-align: right;
}

#actions>* {
  margin-left: .5rem;
}

#loading-layer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: flex;
  pointer-events: none;
}

#baseuri-config {
  position: absolute;
  right: 16px;
  top: 16px;
}
</style>